<template>
  <div class="select-group" id="selectionSendForm">
    <el-button v-show="completeflag" type="success" :loading="finishloading" @click="saveComplete" style="margin:0 0 15px;">宣布完成</el-button>
    <!-- <div v-show="completeflag" style="border-top:1px solid #74A6CC;margin-bottom:15px"></div> -->
    <el-form ref="form"
     v-show="noticeflag"
    :model="selectData"
    label-width="140px"
    label-position="right"
    >
      <el-form-item :label="noticeTitle">
          <el-autocomplete :trigger-on-focus="false" :fetch-suggestions="querySearch" v-model="form.radioNotice" style="width:80%" :maxlength="200"></el-autocomplete>
          <el-popover
            placement="top"
            width="300"
            trigger="click"
            v-model="visible">
            <div class="pop-item" v-for="(item, idx) of selectData.yyData" :key="idx" @click="form.radioNotice = item ; visible = !visible">{{item}}</div>
            <el-button type="primary" slot="reference" v-show="selectData.yyData&&selectData.yyData.length>0">常用用语库</el-button>
          </el-popover>
      </el-form-item>
      <el-radio-group v-model="form.radio">
        <el-form-item label="函件办理环节" v-show="selectData.hjData&&selectData.hjData.length>0">
          <el-radio :label="item.value" v-for="(item, index) of selectData.hjData" :key="index">{{item.name}}</el-radio>
        </el-form-item>
        <el-form-item label="司领导处理环节" v-show="selectData.szData&&selectData.szData.length>0">
          <el-radio :label="item.value" v-for="(item, index) of selectData.szData" :key="index">{{item.name}}</el-radio>
        </el-form-item>
        <el-form-item label="处内人员" v-show="selectData.cnData&&selectData.cnData.length>0">
          <el-radio :label="item.value" v-for="(item, index) of selectData.cnData" :key="index">{{item.name}}</el-radio>
        </el-form-item>
      </el-radio-group>
      <el-form-item>
        <div style="width:80%">
          <el-button type="success" @click="onSubmit(0)" :loading="FormLoading">发送</el-button>
          <el-button v-show="backflag" type="danger" @click="onSubmit(1)" style="float:right" :loading="FormLoading">退回</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'select-group',
  props: ['selectData', 'selectPerson', 'backflag', 'completeflag', 'noticeflag', 'stepState'],
  data () {
    return {
      noticeTitle: '办理提示',
      form: {
        radio: '',
        radioNotice: ''
      },
      FormLoading: false,
      finishloading: false,
      visible: false,
      flag: true // 是否填写完整
    }
  },
  watch: {
    selectData (val, oldVal) {
      console.log('selectData has changed', val)
    },
    selectPerson (val, oldVal) {
      console.log('selectPerson has changed', val)
      this.form.radio = ''
    },
    backflag (val, oldVal) {
      console.log('backflag has changed', val)
    },
    completeflag (val, oldVal) {
      console.log('completeflag has changed', val)
    },
    noticeflag (val, oldVal) {
      console.log('noticeflag has changed', val)
    },
    stepState (val, oldVal) {
      console.log('stepState has changed', val)
    }
  },
  methods: {
    querySearch (queryString, cb) {
      return this.getNotice(this, queryString, cb)
    },
    getNotice (self, queryString, cb) {
      let para = {
        key: queryString
      }
      self.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/home/getMatchedOpinions`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data.result
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item}
            newArr.push(obj)
          })
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    saveComplete () {
      if (this.selectPerson.length > 0) {
        var persons = []
        let person = {}
        this.flag = true
        for (let i = 0; i < this.selectPerson.length; i++) {
          person = {
            id: 0,
            declarePerson: '',
            declarePlace: '',
            declareTime: '',
            files: []
          }
          person.id = this.selectPerson[i].personId
          if (this.selectPerson[i].declarePerson && this.selectPerson[i].declarePerson !== '') {
            person.declarePerson = this.selectPerson[i].declarePerson
          } else {
            console.log('不完整1')
            this.flag = false
          }
          if (this.selectPerson[i].declarePlace && this.selectPerson[i].declarePlace !== '') {
            person.declarePlace = this.selectPerson[i].declarePlace
          } else {
            console.log('不完整2')
            this.flag = false
          }
          if (this.selectPerson[i].declareTime && this.selectPerson[i].declareTime !== '') {
            person.declareTime = this.selectPerson[i].declareTime
          } else {
            console.log('不完整3')
            this.flag = false
          }
          // person.files = this.selectPerson[i].files
          var filelist = []
          if (this.selectPerson[i].files && this.selectPerson[i].files.length > 0) {
            for (let j = 0; j < this.selectPerson[i].files.length; j++) {
              filelist.push(this.selectPerson[i].files[j].id)
            }
          }
          person.files = filelist
          persons.push(person)
        }
        let para = {
          persons: persons
        }
        if (this.flag) {
          this.finishloading = true
          this.$http
            .post(this.$http.defaults.selectionAPI + `api/selection/declare/saveDeclareComplete`, para)
            .then(response => {
              this.finishloading = false
              if (response.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$emit('getList')
              } else {
                this.$message({
                  message: '提交失败:' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch(error => {
              this.$message({
                message: '网络发送失败:' + error,
                type: 'error'
              })
              this.finishloading = false
            })
        } else {
          this.$message({
            message: '请将所选人选信息填写完整',
            type: 'error'
          })
        }
      } else {
        this.$message({
          message: '请至少选择一个人选',
          type: 'error'
        })
      }
    },
    onSubmit (flag) {
      if (this.selectPerson.length > 0) {
        if (this.form.radio || flag) {
          let roletype = ''
          for (let i = 0; i < this.selectData.cnData.length; i++) {
            if (this.form.radio === this.selectData.cnData[i].value) {
              roletype = 'cn'
            }
          }
          console.log('submit radio form data', this.form)
          let persons = []
          let person = {}
          this.flag = true
          for (let i = 0; i < this.selectPerson.length; i++) {
            person = {
              id: 0,
              declarePerson: '',
              declarePlace: '',
              declareTime: '',
              files: []
            }
            person.id = this.selectPerson[i].personId
            if (this.selectPerson[i].declarePerson && this.selectPerson[i].declarePerson !== '') {
              person.declarePerson = this.selectPerson[i].declarePerson
            } else {
              console.log('不完整1')
              this.flag = false
            }
            if (this.selectPerson[i].declarePlace && this.selectPerson[i].declarePlace !== '') {
              person.declarePlace = this.selectPerson[i].declarePlace
            } else {
              console.log('不完整2')
              this.flag = false
            }
            if (this.selectPerson[i].declareTime && this.selectPerson[i].declareTime !== '') {
              person.declareTime = this.selectPerson[i].declareTime
            } else {
              console.log('不完整3')
              this.flag = false
            }
            // person.files = this.selectPerson[i].files
            let filelist = []
            if (this.selectPerson[i].files && this.selectPerson[i].files.length > 0) {
              for (let j = 0; j < this.selectPerson[i].files.length; j++) {
                filelist.push(this.selectPerson[i].files[j].id)
              }
            }
            person.files = filelist
            persons.push(person)
          }
          let opinion = ''
          let receiveUserId = 0
          if (flag) {
            receiveUserId = 0
            if (this.form.radioNotice === '') {
              opinion = '退回'
            } else {
              opinion = this.form.radioNotice
            }
          } else {
            receiveUserId = this.form.radio
            opinion = this.form.radioNotice
          }
          let stepState = 0
          if (roletype === 'cn') {
            stepState = 0
          } else {
            stepState = 1
          }
          if (this.stepState !== '') {
            stepState = this.stepState
          }
          let para = {
            opinion: opinion,
            persons: persons,
            receiveUserId: receiveUserId,
            stepState: stepState
          }
          if (this.flag || roletype === 'cn') {
            this.FormLoading = true
            this.$http
              .post(this.$http.defaults.selectionAPI + `api/selection/declare/submitApprove`, para)
              .then(response => {
                if (response.data.success) {
                  this.$message({
                    message: '发送成功',
                    type: 'success'
                  })
                  this.FormLoading = false
                  this.$emit('getList')
                } else {
                  this.$message({
                    message: '发送失败:' + response.data.message,
                    type: 'error'
                  })
                  this.FormLoading = false
                }
              })
              .catch(error => {
                this.$message({
                  message: '网络发送失败:' + error,
                  type: 'error'
                })
                this.FormLoading = false
              })
          } else {
            this.$message({
              message: '请将所选人选信息填写完整',
              type: 'error'
            })
          }
        } else {
          this.$message({
            message: '请选择接收人',
            type: 'error'
          })
        }
      } else {
        this.$message({
          message: '请至少选择一个人选',
          type: 'error'
        })
      }
    },
    handlePopClick (val) {
      console.log('pop val:', val)
      this.form.radioNotice = val
    }
  },
  mounted () {
    if (JSON.parse(localStorage.getItem('Roles')).indexOf('ROLE_sizhang') > -1 || JSON.parse(localStorage.getItem('Roles')).indexOf('ROLE_fusizhang') > -1) {
      this.noticeTitle = '批示意见'
    } else {
      this.noticeTitle = '办理提示'
    }
  }
}
</script>

<style>
#selectionSendForm .el-form-item{
  margin-bottom:10px !important
}
</style>
<style scoped>
.marginL8 {
  margin-left: 8px;
}
.select-group {
  width: 100%;
  margin-top: 15px;
}
.pop-item {
  line-height: 35px;
  font-size:var(--size16) !important;
  word-break: break-all;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
</style>
